<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
    <link href="css/l-style.css" rel="stylesheet">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/pop_status.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="header-fl fl">科技小桌板</div>
        <div class="header-fr fr">
            <img src="img/icon/default-avatar.png" width="28" height="28" class="default-avatar fl">
            <span class="admin-name fl">Sherry</span>
            <img src="img/icon/exit-icon.png" width="16" height="16" class="login-exit fr">
        </div>
    </div>

    <div class="super-admin">
        <img src="img/icon/s-admin.png" width="70" height="71">
        <span class="super-text">超级管理员</span>
    </div>

    <div class="sidebar">
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div>
                            <a class="sidebar-list" href="index.html" data-id="1">
                                <span class="sidebar-icon">
                                    <span class="side1"></span>
                                </span>
                                <span class="">首页</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                            <a class="sidebar-list" data-id="2" >
                                <span class="sidebar-icon">
                                    <span class="side2"></span>
                                </span>
                                <span class="">消息通知</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="son-sidebar">
                            <li>
                                <a class="sidebar-son-list" data-id="1" href="gg1.html">公告列表</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" data-id="2" href="px1.html">培训通知</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div>
                            <a class="sidebar-list" data-id="3"  href="ry1.html">
                                <span class="sidebar-icon">
                                    <span class="side3"></span>
                                </span>
                                <span class="">人员管理</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div>
                            <a class="sidebar-list" data-id="4" href="qy1.html">
                                <span class="sidebar-icon">
                                    <span class="side4"></span>
                                </span>
                                <span class="">企业信息管理</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div>
                            <a class="sidebar-list" data-id="5" href="sb1.html">
                                <span class="sidebar-icon">
                                    <span class="side5"></span>
                                </span>
                                <span class="">申报看板</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div>
                            <a class="sidebar-list" data-id="6" href="wj1.html">
                                <span class="sidebar-icon">
                                    <span class="side6"></span>
                                </span>
                                <span class="">文件管理</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">
                            <a class="sidebar-list" data-id="7">
                                <span class="sidebar-icon">
                                    <span class="side7"></span>
                                </span>
                                <span class="">账号管理</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="collapseSeven" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="son-sidebar">
                            <li>
                                <a class="sidebar-son-list" href="zh2.html" data-id="1">普通管理员账号管理</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="zh1.html" data-id="2">科技联络人审核</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div data-toggle="collapse" data-parent="#accordion" href="#collapseEight">
                            <a class="sidebar-list" data-id="8">
                                <span class="sidebar-icon">
                                    <span class="side8"></span>
                                </span>
                                <span class="">系统设置</span>
                                <span class="r-arrow"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="collapseEight" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="son-sidebar">
                            <li>
                                <a class="sidebar-son-list" href="xt3.html" data-id="1">个人信息</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="xt7.html" data-id="2">修改密码</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="xt5.html" data-id="3">企业类别管理</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="xt6.html" data-id="4">企业属性管理</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="xt1.html" data-id="5">Banner图管理</a>
                            </li>
                            <li>
                                <a class="sidebar-son-list" href="xt8.html" data-id="6">注册协议管理</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-header">
        <div class="page-right-top">
            <div class="right-top">
                <span class="right-title">消息通知</span>
            </div>
            <div class="top-nav">培训通知</div>
            <span class="r-arrow top-r-arrow"></span>
            <div class="top-nav top-nav-active">发布培训</div>
        </div>
        <div class="main-content">
            <div class="mes-content">
                <div class="main-mes-content">
                    <form id="comMesBtn">
                        <div class="com-list">

                            <div class="com-list-box" style="width: 725px;">
                                <div class="com-left fl">培训标题</div>
                                <input type="text" name="title" class="is-change pop-com-input" maxlength="20" placeholder="请输入培训标题">
                                <span class="pop-com-num">20</span>
                            </div>

                            <div class="com-list-box">
                                <div class="com-left fl">标题关键字</div>
                                <input type="text" name="title" class="is-change pop-com-input" maxlength="20" placeholder="请输入标题关键字">
                            </div>

                            <div class="com-list-box display">
                                <div class="com-list-box fl">
                                    <div class="com-left fl">培训日期</div>
                                    <div class="mes-input fl mes-date" style="width: 217px;margin-right: 0;">
                                        <span class="date-icon"></span>
                                        <div class="form-group">
                                            <div class="right col-xs-6 text-left">
                                                <div class="input-group">
                                                    <input type="text" style="width: 185px;" class="form-control form_datetime" id="addtime" name="addtime" placeholder="开始时间">
                                                    <span class="input-group-addon" id="basic-addon"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="com-list-box fl">
                                    <div class="com-left fl" style="width: 66px;">培训机构</div>
                                    <input type="text" class="tarin-input" placeholder="请输入培训机构">
                                </div>

                                <div class="clearfix"></div>
                            </div>

                            <div class="com-list-box display">
                                <div class="com-list-box fl">
                                    <div class="com-left fl">机构关键词</div>
                                    <input type="text" class="tarin-input" placeholder="请输入机构关键词">
                                </div>

                                <div class="com-list-box fl">
                                    <div class="com-left fl" style="width: 66px;">培训师</div>
                                    <input type="text" class="tarin-input" placeholder="请输入培训师姓名">
                                </div>

                                <div class="clearfix"></div>
                            </div>


                            <div class="com-list-box">
                                <div class="com-left fl">培训内容</div>
                                <textarea name="outline" class="is-change pop-com-textarea" placeholder="请输入培训内容" cols="30" rows="8"></textarea>
                            </div>

                            <div class="display">
                                <div class="com-list-box fl">
                                    <div class="com-left fl">附件</div>
                                    <label class="upload-btn fl" for="upload_file" style="margin: 0;">点击上传</label>

                                    <input type="file" id="upload_file">
                                    <div class="clearfix"></div>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                            <div class="display">
                                <div class="com-list-box fl">
                                    <div class="com-left fl" style="margin-top: 12px;">发送给</div>
                                    <div id="collect-mes" class="collect-mes-box">
                                        <div class="collect-mes"></div>
                                        <span class="send-out fl" style="margin: 16px 0 0 10px;"></span>

                                        <div class="clearfix"></div>
                                    </div>

                                    <div class="clearfix"></div>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                            <div class="clearfix"></div>
                            <div class="add-mem-box" style="margin-top: 40px;">
                                <div class="com-left fl"></div>
                                <div class="acc-opera-btn fl mem-btn p-first-btn">发布</div>
                                <div class="acc-opera-btn fl mem-cancel">取消</div>
                            </div>
                        </div>

                        <input type="hidden" name="is_member">
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="pop-status opacity"></div>

    <!--接收公告人员-->
    <div class="pop-first pop-receive-member" style="display: none;">
        <div class="pop-title">选择接收培训通知人员
            <span class="close close-icon"></span>
        </div>
        <div style="padding: 20px;">
            <div class="pop-add-fl fl">

            </div>
            <div class="pop-add-fr">
                <div class="pop-add-top">
                    <div class="screen-term">
                        <select class="screen-de" name="" id="">
                            <option value="">筛选条件</option>
                            <option value="企业类别">企业类别</option>
                            <option value="企业载体">企业载体</option>
                            <option value="条件四">状态</option>
                            <option value=""></option>
                        </select>
                    </div>

                    <div class="mes-input fl" style="width: 138px;">
                        <input type="text" class="keyword-input" style="width: 120px;" name="condition" placeholder="请先选择筛选条件">
                    </div>

                    <button class="mes-query-btn fl">查询</button>
                </div>

                <div class="pop-add-slide">
                    <div class="choose-top">
                        <input type="checkbox" id="allcbox" class="fl">
                        <span class="choose-all">全选</span>
                    </div>

                    <div class="g-choose-list">
                        <input name="sid[]" autocomplete="off" type="checkbox" class="fl" data-m="1" data-n="张某某" data-p="11111111111">
                        <div class="g-message">
                            <span class="g-name">张某某</span>
                            <span class="g-name">11111111111</span>
                            <span class="g-name">苏州派伽信息技术有限公司</span>
                        </div>
                    </div>

                    <div class="g-choose-list">
                        <input name="sid[]" autocomplete="off" type="checkbox" class="fl" data-m="2" data-n="张某某" data-p="12222222222">
                        <div class="g-message">
                            <span class="g-name">张某某</span>
                            <span class="g-name">12222222222</span>
                            <span class="g-name">苏州派伽信息技术有限公司</span>
                        </div>
                    </div>

                    <div class="g-choose-list">
                        <input name="sid[]" autocomplete="off" type="checkbox" class="fl" data-m="3" data-n="张某某" data-p="1333333333">
                        <div class="g-message">
                            <span class="g-name">张某某</span>
                            <span class="g-name">1333333333</span>
                            <span class="g-name">苏州派伽信息技术有限公司</span>
                        </div>
                    </div>

                    <div class="g-choose-list">
                        <input name="sid[]" autocomplete="off" type="checkbox" class="fl" data-m="4" data-n="张某某" data-p="14444444444">
                        <div class="g-message">
                            <span class="g-name">张某某</span>
                            <span class="g-name">14444444444</span>
                            <span class="g-name">苏州派伽信息技术有限公司</span>
                        </div>
                    </div>

                    <div class="g-choose-list">
                        <input name="sid[]" autocomplete="off" type="checkbox" class="fl" data-m="5" data-n="张某某" data-p="15555555555">
                        <div class="g-message">
                            <span class="g-name">张某某</span>
                            <span class="g-name">15555555555</span>
                            <span class="g-name">苏州派伽信息技术有限公司</span>
                        </div>
                    </div>

                    <div class="g-choose-list">
                        <input name="sid[]" autocomplete="off" type="checkbox" class="fl" data-m="6" data-n="张某某" data-p="16666666666">
                        <div class="g-message">
                            <span class="g-name">张某某</span>
                            <span class="g-name">16666666666</span>
                            <span class="g-name">苏州派伽信息技术有限公司</span>
                        </div>
                    </div>

                    <div class="g-choose-list">
                        <input name="sid[]" autocomplete="off" type="checkbox" class="fl" data-m="7" data-n="张某某" data-p="17777777777">
                        <div class="g-message">
                            <span class="g-name">张某某</span>
                            <span class="g-name">17777777777</span>
                            <span class="g-name">苏州派伽信息技术有限公司</span>
                        </div>
                    </div>
                </div>
            </div>

            <button class="pop-g-btn">确定</button>

            <div class="clearfix"></div>
        </div>
    </div>
</div>

<script src="js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        SidebarHighlighting('2');
        SonSidebar('2', '2');

        // 日历
        $('.form_datetime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            language:  'zh-CN',
            format: 'yyyy-mm-dd',
            todayBtn:  1,
            autoclose: 1
        });

        // 监听input值的变化
        $('.is-change').keyup(function() {
            var this_val_len = $(this).val().length;

            $(this).next('.pop-com-num').text(20 - this_val_len);
        });

        $('.send-out').on('click', function() {
            ComMesOpen();

            // 获取列表数据
            var html = $('.collect-mes').html();

            $('.pop-add-fl').empty().html(html);
        });

        //点击取消
        $('.mem-cancel, .close-icon').on('click', function() {
            ComMesClose();
        });

        var $subBox = $("input[name='sid[]']");

        //点击全选
        $("#allcbox").click(function() {
            $subBox.prop("checked",this.checked);

            $('.pop-add-fl').empty();
            $subBox.each(function() {
                var $this = $(this);
                if ($this.is(':checked')) {

                    getListData($this);
                }
            })
        });

        // 点击checkbox框
        $subBox.click(function(){
            $("#allcbox").prop("checked",$subBox.length == $("input[name='sid[]']:checked").length ? true : false);

            var box_id = $(this).data('m');

            if ($(this).is(':checked')) {

                getListData($(this));

            } else {
                $('.g-left-list').each(function() {
                    var $this = $(this);

                    if ($this.data('id') == box_id) {
                        $this.remove();
                    }
                })
            }
        });

        // 点击左上角叉号

        $('body').on('click', '.g-left-icon', function() {
            var $this = $(this);

            var list_id = $this.parent('.g-left-list').data('id');

            $this.parent('.g-left-list').remove();

            $subBox.each(function() {
                var $this = $(this);
                if (list_id == $this.data('m')) {
                    $this.prop("checked", false);
                }
            });

            $("#allcbox").prop("checked",$subBox.length == $("input[name='sid[]']:checked").length ? true : false);
        });

        //  点击确定
        $('.pop-g-btn').on('click', function() {

            $('.collect-mes').empty();

            if ($('.g-left-list').length == 0) {
                popStatus(2, '请选择接收培训通知人员', 1, '', true);
            } else {
                ComMesClose();

                var html = $('.pop-add-fl').html();

                $('.collect-mes').prepend(html);
            }

        });

        // 点击发布
        $('.p-first-btn').on('click', function() {
            var is_arr = [];

            // 接收人员数据
            $('.collect-mes .g-left-list').each(function() {
                var is_obj = {};

                var $this = $(this);

                var p_name = $this.find('.p-name').text();
                var p_phone = $this.find('.p-phone').text();

                is_obj['name'] = p_name;
                is_obj['phone'] = p_phone;

                is_arr.push(is_obj);
            });

            var is_member = JSON.stringify(is_arr);

            $('input[name="is_member"]').val(is_member);

        });

        //  向弹窗左侧追加数据
        function getListData(isAajax) {
            var is_num = isAajax.data('m');
            var is_name = isAajax.data('n');
            var is_phone = isAajax.data('p');

            var html = '<div class="g-left-list" data-id="'+ is_num +'">\
                            <div style="width: 100%;" class="a-line">\
                                <span class="p-name">'+ is_name +'</span>\
                                <span class="p-phone">'+ is_phone +'</span>\
                            </div>\
                            <span class="reset-icon g-left-icon"></span>\
                        </div>';

            $('.pop-add-fl').prepend(html);
        }

        // 弹框显示函数
        function ComMesClose() {
            $('.pop-status').hide();
            $('.pop-first').hide();
        }

        function ComMesOpen() {
            $('.pop-status').show();
            $('.pop-first').show();
        }


    })
</script>
</body>
</html>